<template>
  <div>
    <el-table :data="data.body.records">
      <el-table-column v-for="item in data.header" :width="item.width" :key="item.key" :label="item.label" :formatter="item.formatter" :prop="item.key"/>
      <el-table-column v-if="data.operation" label="操作">
        <template slot-scope="scope">
          <slot :scope="scope" name="expand"/>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <b/>
      <el-pagination :current-page="data.body.current" :page-size="data.body.size" :total="data.body.total" layout="total, prev, pager, next" @current-change="change"/>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      required: true,
      default: function() {
        return {
          header: [],
          body: {
            current: 1,
            size: 10,
            total: 0,
            records: []
          },
          operation: true
        }
      }
    }
  },
  methods: {
    change(current) {
      this.$emit('change', current)
    }
  }
}
</script>
